<template>
	<view class="container">
		<TopNav title="申请签证" bg-color="#fff"></TopNav>
		<view class="">
			<view class="">
				<text class="f-w500 f-s15 line-height22">申请内容</text>
			</view>
			<FormSelect title="申请城市" placeholder="请选择你申请的城市" class="m-t11" readonly @click.native="handleToPage">

			</FormSelect>
			<FormSelect title="开始时间" placeholder="请选择你申请的开始时间" picker-title="请选择开始时间" class="m-t11">
				<view class="p-tb16">
					<van-datetime-picker v-model="currentDate" type="datetime" :show-toolbar="false" :min-date="minDate"
						:max-date="maxDate" @change="handleStartDateChange" />
				</view>
			</FormSelect>
			<FormSelect title="结束时间" placeholder="请选择你申请的结束时间" picker-title="请选择结束时间" class="m-t11">
				<view class="p-tb16">
					<van-datetime-picker v-model="currentDate" type="datetime" :show-toolbar="false" :min-date="minDate"
						:max-date="maxDate" @change="handleStartDateChange" />
				</view>
			</FormSelect>
			<FormInput title="申请天数" placeholder="选择开始与结束时间自动计算" readonly class="m-t11"></FormInput>
			<FormInput title="申请原因" placeholder="请填写原因" type="textarea" class="m-t11"></FormInput>

		</view>
		<view class="m-t16">
			<view class="">
				<text class="f-w500 f-s15 line-height22">申请说明</text>
			</view>
			<view class="m-t10 line-height20 text-gray f-s14 flex flex-direction">
				<text>1、申请周期至少7天；</text>
				<text>2、申请城市需为当前城市之外的其他可服务城市，且单次申请限一座城市；</text>
				<text>3、审核通过后，在签证生效时间内，可在原城市和签证城市自由接单，失效后则只可在原城市接单</text>
			</view>
		</view>
		<view class="fixed-bottom bg-white p-lr16">
			<view class="self-btn full-width m-t6" hover-class="pressed">
				<text>提交申请</text>
			</view>
		</view>
	</view>
</template>

<script>
	import FormSelect from '@/components/form-select'
	import FormInput from '@/components/form-input'
	export default {
		components: {
			FormSelect,
			FormInput
		},
		data() {
			return {
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				currentDate: new Date(),
				form: {}
			};
		},
		methods: {
			handleToPage(){
				this.$tab.navigateTo('../service/city?title=请选择你申请的城市')
			},
			handleStartDateChange(picker) {
				console.log('picker.getValues(): ', picker.getValues());
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/css/var.scss';

	page {
		@include fixed-bottom;
		background-color: #fff;
	}

	.container {
		padding: 32rpx;
	}
</style>